<template>
  <div style="height: 100%;border-radius: 10px;">
    <div style="height: 10%;padding: 15px;display: flex;justify-content: space-between">
      <div>
        <el-input v-model="data.inpVal1" style="width: 200px;" placeholder="请输入标题名称"></el-input>
        <el-input v-model="data.inpVal2" style="width: 200px;margin-left: 10px" placeholder="请输入发布账号"></el-input>
        <el-button type="primary" @click="load" style="margin-left: 10px">搜索</el-button>
        <el-button plain type="warning" @click="reset" style="margin-left: 10px">重置</el-button>
      </div>
      <div style="display: flex">
        <el-button type="success" @click="addInfo">新增</el-button>
      </div>
    </div>
    <div>
      <el-table
          v-loading="data.loading"
          height="440"
          :data="data.tableData"
          :default-sort="{ prop: 'id', order: 'descending' }"
          @selection-change="handleSelection"
          style="width: 100%;"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" sortable label="编号" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="content" label="内容" align="center">
          <template v-slot="scope">
            <el-button size="small" @click="showDialog(scope.row)">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="发布账号" align="center"></el-table-column>
        <el-table-column prop="time" label="时间" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="role" label="身份" show-overflow-tooltip align="center">
          <template v-slot="scope">
            <el-tag type="primary">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发布" align="center">
          <template v-slot="scope">
            <el-switch v-model="scope.row.open" @change="changeOpen(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" size="small" @click="updateInfo(scope.row)" />
            <el-button type="danger" :icon="Delete" size="small" @click="del(scope.row.id)"  />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据弹窗 -->
    <el-dialog
        title="公告内容"
        v-model="data.showVisible"
        width="30%"
    >
      <el-card style="padding: 20px;">
        <div v-if="data.showContent">{{ data.showContent}}</div>
        <div v-else>暂无数据！</div>
      </el-card>
    </el-dialog>
    <!--弹窗-->
    <el-dialog
        title="数据更新"
        v-model="data.dialog"
        width="35%"
        style="padding: 30px"
        :close-on-click-modal="false">
      <el-form ref="noticeFormRef" :rules="data.rules" :model="data.add" label-width="80px">
        <el-form-item prop="title" label="标题：">
          <el-input v-model="data.add.title" placeholder="请输入标题名"></el-input>
        </el-form-item>
        <el-form-item prop="content" label="内容：">
          <el-input type="textarea" v-model="data.add.content" placeholder="请输入公告内容"></el-input>
        </el-form-item>
        <div style="display: flex;justify-content: end">
          <el-button type="success" @click="addAndUpdate">提交</el-button>
          <el-button plain type="primary" @click="data.dialog = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 分页器 -->
    <div style="width: 200px;margin: 10px -100px;position: relative;left: 50%;">
      <!--
          1.@size-change  赋值每页数据数量
          2.@current-change  赋值页码
          3.pageNum 当前页码
          4.pageSize 每页数量
      -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[8, 10, 1000]"
          :page-size="data.pageSize"
          background
          layout="prev, pager, next, sizes, total"
          :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref, reactive, getCurrentInstance} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";

const {proxy} = getCurrentInstance();
const data = reactive({
  user: JSON.parse(sessionStorage.getItem('user-data')),
  loading: true,
  inpVal1: '',
  inpVal2: '',
  pageNum: 1, // 当前页码
  pageSize: 8, // 每页数量
  total: 0,

  tableData: [], // 表格数据
  ids: [], // 批量删除数据id
  isNull: true, // 批量删除禁用开启

  showVisible: false,
  showContent: '',
  add: {}, // 添加数据
  rules: {
    title: [
      { required: true, message: '请输入标题名', trigger: 'blur' },
    ],
    content: [
      { required: true, message: '请输入公告内容', trigger: 'blur' },
    ],
  }
});



/**
 * 公告发布
 * */
const changeOpen=(row)=> {
  // 调用更新的接口  更新数据到数据库
  data.add = JSON.parse(JSON.stringify(row))
  sentAddOrUpdate()   // 直接发请求就可以了
};

/**
 * 查看公告内容
 */
const showDialog=(row)=> {
  data.showContent = row.content;
  data.showVisible = true;
};

/**
 * 重置
 */
const reset = () =>{
  data.inpVal1 = '';
  data.inpVal2 = '';
  load();
};

/**
 * 新增修改
 */
const addInfo = () => {
  data.add = {};
  data.dialog = true;
};
const updateInfo = (row) => {
  data.add = JSON.parse(JSON.stringify(row));
  data.dialog = true;
};
const addAndUpdate = () => {
  proxy.$refs['noticeFormRef'].validate(valid => {
    if (valid) {
      sentAddOrUpdate();
    }
  });
};
const sentAddOrUpdate = () => {
  proxy.$request({
    url: data.add.id ? '/notice/update' : '/notice/add',
    method: data.add.id ? 'PUT' : 'POST',
    data: data.add
  }).then(res => {
    if (res.code === '200') {
      data.dialog = false;
      ElMessage({message: '数据更新成功！', type: 'success'});
      load();
    } else {
      ElMessage({message:res.msg,type:'error'});
    }
  });
};
/**
 * 获取表格中的被选中数据
 */
const handleSelection=(rows)=> {
  data.ids = rows.map(v => v.id);
  data.isNull = data.ids.length <= 0;
};


const del = (id) => {
  proxy.$confirm('确定删除该条数据？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'danger'
  }).then(() => {
    proxy.$request.delete('/notice/del/' + id).then(res => {
      if (res.code === '200') {
        ElMessage({message: '删除成功！', type: 'success'});
        load();
      } else {
        ElMessage({message: res.msg, type: 'error'});
      }
    });
  }).catch(() => {});
};

/**
 * 页面加载
 */
const load = ()=>{
  proxy.$request.get('/notice/findByPage',{
    params:{
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.inpVal1,
      username: data.inpVal2,
    }
  }).then(res => {
    if (res.data != null) {
      data.tableData = res.data.tlist
      data.total = res.data.total;
    } else {
      ElMessage({message:res.msg,type:'error'});
    }
    data.loading = false;
  });
}
// 调用函数
load();
/**
 * 赋值分页器
 */
const handleSizeChange = (pageSize) => {
  data.pageSize = pageSize;
  load();
};
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum;
  load();
};
</script>
<style scoped>

</style>